<template>
  <div class="guang" :style="`height:${h}px;  width:${w}px;`">
    <img src="../../public/img/11.jpg" alt="" :style="`height:${h}px;`" />
    <button @click="dianjis">跳过广告{{ time }}</button>
    <button @click="dianji">了解详情</button>
  </div>
</template>

<script>
export default {
  created() {
    //获取1-10之间的随机数
    // let  num = Math.floor(Math.random() * 3+ 11) ;
    // console.log(num);
    // if(num==11){
    //   this.number=11+".jpeg"
    // }else{
    //   this.number=num+".gif"
    // }
  },
  data() {
    return {
      h: 100,
      w: 100,
      time: 5,
      timer: "",
      // 随机的广告数字
      num: "",
      //广告的数字
      number: "",
    }
  },
  mounted() {
    let screenh = window.innerHeight
    let screenw = window.innerWidth
    this.h = screenh
    this.w = screenw
    //console.log(this.w, this.h);
    this.timer = setInterval(() => {
      this.time--
      if (this.time == 0) {
        this.$router.push("/home")
      }
    }, 1000)
  },
  methods: {
    dianjis() {
      this.$router.push("/home")
      clearTimeout(this.timer)
    },
    dianji() {
      clearInterval(this.timer)
      this.$router.push("/product")
    },
  },
}
</script>

<style lang="scss" scoped>
.guang {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.guang button:nth-child(2) {
  position: absolute;
  top: 0.9375rem;
  right: 1.25rem;
  width: 12.5rem;
  border-radius: 0.625rem;
  height: 2.1875rem;
  color: orange;
  border-color: transparent;
}
.guang button:nth-child(3) {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 12.5rem;
  border-radius: 0.625rem;
  height: 2.1875rem;
  color: orange;
  border-color: transparent;
}
.guang img {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
